<template>
	<view class="u-page">
		<view class="user-box" v-if="user">
			<view class="user">
				<image :src="user.avatar"></image>
				<text class="nickname">{{user.nickname}}</text>
				<text class="score">积分：{{user.score}}</text>
			</view>
		</view>
		<view class="goods">	
			<u-empty mode="list" text="没有商品" marginTop="100" icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="list.length==0"></u-empty>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="img" :style="'background: url('+item.img+');background-repeat:no-repeat;background-size:100% 100%'"></view>
					<view class="title">{{item.name}}</view>
					<view class="score">{{item.formate_price}}</view>
					<view class="stock">
						<text>销量：{{item.sale}}</text>
					</view>
					<view class="number">
						<u-number-box v-model="item.number"></u-number-box>
					</view>
					<u-button @click="buy(item)" size="small" style="width: 100%;" type="primary">{{item.button}}</u-button>
				</view>
			</view>
		</view>
		<u-tabbar value="shop" @change="changeBar">
			<u-tabbar-item text="积分商城" name="shop">
				<image
					style="width: 40rpx;height: 40rpx;"
					slot="active-icon"
					src="/static/tabbar/shop_a.png">
				</image>
				<image
					style="width: 40rpx;height: 40rpx;"
					slot="inactive-icon"
					src="/static/tabbar/shop.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="会员中心" name="user">
				<image
					style="width: 42rpx;height: 42rpx;"
					slot="active-icon"
					src="/static/tabbar/my_a.png">
				</image>
				<image
					style="width: 42rpx;height: 42rpx;"
					slot="inactive-icon"
					src="/static/tabbar/my.png">
				</image>
			</u-tabbar-item> 
		</u-tabbar>
	</view>
</template>

<script>
	import {baseUrl,methods} from '@/utils/methods.js';
	export default{
		data:function(){
			return {
				customer:'',
				keyword:'',
				list:[],
				endData:false,
				page:1,
				user:'',
				bar:'shop'
			}
		},
		onReachBottom(){
			this.goodsList();
		},
		onLoad:function(){
			this.customer=this.$customer();
			if(!this.customer){
				this.$reLaunch('index/index');
				return;
			}
			this.goodsList();
		},
		methods:{
			...methods,
			changeBar:function(e){
				switch(e){
					case 'user':
					this.$redirectTo('index/user');
					break;
					case 'shop':
					this.$redirectTo('shop/index');
					break;
				}			
			},
			buy:function(item){
				let score=item.max_score_money*item.score_price*item.number;
				score=(score>this.user.score)?this.user.score:score;
				let money=0;
				if(item.score_price){
					money=item.price*item.number-score/item.score_price;
				}else{
					money=item.price*item.number;
				}
				let content='';
				if(money<=0){
					content='您确认要使用'+score+'积分兑换该商品吗？';
				}else if(score<=0){
					content='您确认要支付￥'+money+'购买该商品吗？';
				}else{
					content='您确认要支付￥'+money+' + '+score+'积分兑换该商品吗？';
				}
				let that=this;
				uni.showModal({
					content:content,
					success: (e) => {
						if(e.confirm){
							// #ifdef H5
							let platform='mp';
							// #endif
							// #ifdef MP-WEIXIN
							let platform='miniapp';
							// #endif
							that.$post('shop/buy',{goods_id:item.id,number:item.number,customer_id:this.customer.id,platform:platform},true,true).then(res=>{
								if(res){
									// #ifdef H5
									wxpay(res);
									// #endif
									// #ifdef MP-WEIXIN
									uni.requestPayment({
										provider:'wxpay',
										...res,
										success: () => {
											that.$msg('支付成功');
											setTimeout(function(){
												that.changeBar('user');
											},1500);
										},
										fail:()=>{
											that.$msg('支付失败！');
										}
									});
									// #endif
								}else{
									that.$msg('下单成功');
									setTimeout(function(){
										that.changeBar('user');
									},1500);
								}
							});
						}
					}
				});
			},
			goodsList:function(){
				if(this.endData){
					this.$msg('已经到底了');
					return;
				}
				this.$get("shop/goodslist",{
					channel_id:this.customer.channel_id,
					keyword:this.keyword,
					page:this.page
				},true).then(data=>{
					let {res,user}=data;
					this.user=user;
					if(res.length<10){
						this.endData=true;
					}
					res=res.map(t=>{
						let score=t.max_score_money*t.score_price;
						let price=t.price-t.max_score_money;
						if(price<=0){
							t.formate_price='￥'+t.price+' 或 '+score+'积分';
							t.button="立即兑换";
						}else if(score<=0){
							t.formate_price='￥'+price;
							t.button="立即购买";
						}else{
							t.formate_price='￥'+price+' + '+score+'积分';
							t.button="立即兑换";
						}
						t.number=1;
						if(!t.coupon){
							t.stock=t.stock;
						}else{
							t.stock=t.coupon.total;
						}
						return t;
					});
					this.list=this.list.concat(res);	
					this.page++;	
				});		
			}
		}
	}
</script>

<style lang="scss">
.u-page{
	
}
.user-box{
	padding:20rpx;
	padding-bottom: 10rpx;
	.user{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: #e0f3f3;
		padding: 20rpx;
		image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}
		.nickname{
			font-weight: bold;
			margin-left: 20rpx;
			width: 45%;	
		}
		.score{
			border-left: 4rpx solid #f7f7f7;
			height: 120rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 20rpx;	
		}
	}
}
.goods{
	padding:10rpx 20rpx 20rpx 20rpx;
}
.list{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.item{
		width: 48%;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		background-color: #f4f4f4;
		overflow: hidden;
		.img{
			width: 100%;
			height: 300rpx;
		}
		.title{
			padding:0 10rpx;
			margin:20rpx 0;
			font-size: 26rpx;
		}
		.stock{
			display: flex;
			justify-content: flex-start;
			color: darkgrey;
			padding:0 10rpx;
			padding-bottom: 20rpx;
		}
		.score{
			padding:0 10rpx;
			padding-bottom: 20rpx;
			font-size: 32rpx;
			color: red;
		}
		.number{
			padding:0 10rpx;
			padding-bottom: 20rpx;
		}
	}
}
</style>